<template>
  <!-- 静态参数的用法 -->
  <!-- <h2 v-style:color="'cyan'">Hello Escook.</h2>
  <h2 v-style:background-color="'red'">Hello Liu Longbin.</h2> -->

  <button @click="propName = 'color'">修改前景色</button>
  <button @click="propName = 'background-color'">修改背景色</button>
  <h2 v-style:[propName]="'red'">Hello World.</h2>
</template>

<script setup>
import { ref } from 'vue'

const propName = ref('color')

const vStyle = (el, binding) => {
  el.style = {}
  el.style[binding.arg] = binding.value
}
</script>

<style scoped></style>
